import React, {useContext} from 'react'
import './index.css'
import { Context } from '../../App'

function Footer(props){
    const {todos,dispatch} = useContext(Context)
    const checkedNume = todos.reduce((total,item) => total + (item.done ? 1 : 0),0)

    function handleCheckAll(e){
        dispatch({type:'checkAll',done:e.target.checked})
    }
    function handleClearALL(){
        dispatch({type:'clearAll'})
    }
    return(
        <div className="todo-footer">
            <label>
                <input type="checkbox" checked={checkedNume === todos.length && checkedNume !== 0} onChange={handleCheckAll}/>
            </label>
            <span>
                <span>已完成{checkedNume}</span> / 全部{todos.length}
            </span>
            <button className="btn btn-danger" onClick={handleClearALL}>清除已完成任务</button>
        </div>
    )
}

export default Footer